<template>
  <div class="rename-button-content">
    <el-button v-if="roundFlag" type="warning" :size="size" @click="renameFile">
      <i class="el-icon-edit el-icon--right" /> 重命名
    </el-button>
    <el-button
      v-if="circleFlag"
      type="warning"
      :size="size"
      circle
      @click="renameFile"
    >
      <i class="el-icon-edit" />
    </el-button>
    <el-dialog
      title="文件重命名"
      :visible.sync="renameDialogVisible"
      width="30%"
      @opened="focusInput('filename')"
      @closed="resetForm('renameForm')"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div>
        <el-form
          label-width="100px"
          :rules="renameRules"
          ref="renameForm"
          :model="renameForm"
          status-icon
          @submit.native.prevent
        >
          <el-form-item label="文件名称" prop="filename">
            <el-input
              type="text"
              ref="filename"
              @keyup.enter.native="doRenameFile"
              v-model="renameForm.filename"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="renameDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doRenameFile" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fileService from "../../../api/file";
import { mapActions, mapGetters } from "vuex";

export default {
  name: "RenameButton",
  components: {},
  props: {
    roundFlag: Boolean,
    circleFlag: Boolean,
    size: String,
    item: Object,
  },
  data() {
    return {
      renameRules: {
        filename: [
          { required: true, message: "请输入新文件名称", trigger: "blur" },
        ],
      },
      renameForm: {
        fileId: "",
        filename: "",
      },
      renameDialogVisible: false,
      loading: false,
    };
  },
  methods: {
    ...mapActions({
      reloadFileList: "file/loadFileList",
    }),
    renameFile() {
      let _this = this;
      if (_this.item) {
        _this.renameForm.fileId = _this.item.fileId;
        _this.renameForm.filename = _this.item.filename;
        _this.renameDialogVisible = true;
        return;
      }
      if (!_this.multipleSelection || _this.multipleSelection.length == 0) {
        _this.$message.error("请选择要重命名的文件");
        return;
      }
      if (_this.multipleSelection.length > 1) {
        _this.$message.error("请选择一个文件进行重命名");
        return;
      }
      let item = _this.multipleSelection[0];
      _this.renameForm.fileId = item.fileId;
      _this.renameForm.filename = item.filename;
      _this.renameDialogVisible = true;
    },
    doRenameFile() {
      let _this = this;
      _this.$refs.renameForm.validate((valid) => {
        if (valid) {
          _this.loading = true;
          fileService.update(
            {
              fileId: _this.renameForm.fileId,
              newFilename: _this.renameForm.filename,
            },
            (res) => {
              _this.loading = false;
              _this.renameDialogVisible = false;
              _this.$message.success("重命名成功");
              _this.reloadFileList();
            },
            (res) => {
              _this.$message.error(res.message);
              _this.loading = false;
            }
          );
        }
      });
    },
    focusInput(refName) {
      this.$refs[refName].focus();
    },
    resetForm(refName) {
      this.$refs[refName].resetFields();
    },
  },
  computed: {
    ...mapGetters(["multipleSelection"]),
  },
  mounted() {},
  watch: {},
};
</script>

<style>
.rename-button-content {
  display: inline-block;
  margin-right: 10px;
}
</style>
